<!-- 匹配产品列表 -->
<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <view v-for="item in list" :key="item">
        <ListRow :item="item" />
      </view>
    </van-list>
  </van-pull-refresh>
</template>

<script setup>
import ListRow from './listRow.vue'

const props = defineProps({
  datas: {
    type: Array,
    required: true,
    default() {
      return []
    },
  },
})

const list = ref(props.datas)
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)

const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      list.value = []
      refreshing.value = false
    }

    loading.value = false

    // if (list.value.length >= 40) {
    finished.value = true
    // }
  }, 1000)
}

const onRefresh = () => {
  // 清空列表数据
  finished.value = false

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true
  onLoad()
}
</script>

<style></style>
